<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="tname">
    <input type="button" value="查询" @click="findByName">
    <table border="1">
        <thead>
            <tr>
                <th>编号</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="t in list">
                <td v-text="t.tid"></td>
                <td v-text="t.tname"></td>
                <td v-text="t.phone"></td>
                <td v-text="t.address"></td>
                <td>
                    <input type="button" value="删除" @click="del(t.tid)">
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                list:"",
                tname:""
            }
        },
        created(){
          this.findall()
        },
        methods: {
            async findall(){
                let {data:list} = await axios({
                    url:"tea/findAll"
                })
                this.list = list;
                console.log(this.list)
            },
            async findByName(){
                let {data:list} = await axios({
                    url:"tea/findByName",
                    params:{tName:this.tname}
                })
                this.tname=""
                this.list = list
            },
            async del(tid){
                if(confirm("是否确定删除？")){
                    let {data:res} = await axios({
                        url:"tea/delTeacher",
                        params:{tId:tid}
                    })
                    if(res==1){
                        this.findall()
                    }else{
                        alert("删除失败")
                    }
                }
            }
        }
    })
    app.mount("#app")
</script>
</html>